<template>
    <div style="padding: 20px;">
      <el-tree
        :data="data"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false">
      <div class="custom-tree-node" slot-scope="{ node, data }">
        <div class="fl w-300">{{ node.label }}</div>

        <div style="flex: 1" class="clearfix">
          <div class="table-col"><p>在职（直属/总共)：1/6</p></div>
          <div class="table-col"><p>编制（直属/总共：1/6</p></div>
          <div class="table-col"><p>部门负责人：暂无</p></div>
          <div class="table-col-opera clearfix">
            <span>操作：</span>
            <el-button
              type="text"
              size="mini"
              @click="() => append(data)">
              Append
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="() => remove(node, data)">
              Delete
            </el-button>
          </div>
        </div>
      </div>
      </el-tree>
    </div>
</template>
<script>
    export default {
        name: 'orgManage',
      data() {
        const data = [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }];
        return {
          data: JSON.parse(JSON.stringify(data))
        }
      },
        components: {},
        created() {

        },
        methods: {}
    }
</script>

<style lang='less' scoped>
.custom-tree-node{
  display: flex;
  width: 100%;
  .table-col{
    float: left;
    width: 200px;
  }
  .table-col-opera{
    width: 350px;
  }
  .el-tree-node__content{
    padding-right: 18px;
  }
}
</style>
